<template>
    <div class="hello">
        <div class="frame">
            <!-- 标题 -->
            <div class="flexal" style="padding-top: 16px;margin-bottom: 10px;">
                <!-- 组织内联系人 -->
                <div class="people-title" v-if="type != 1 && type !=4">{{title}}</div>
                <!-- 我的群组 -->
                <div class="flexal" style="width: 100%;" v-if="type == 1">
                <div class="people-title" style="flex: 1;" >{{title}}</div>
                <div class="create-frame flexcen" @click="dialogVisibleMember = !dialogVisibleMember">创建群组</div>
                </div>
                <div class="flexal" v-if="type == 4">
                    <div class="people-title" style="font-size: 16px;">深圳市XXXXXX有限公司</div>
                    <img :src="require('@/assets/img/right.png')"  style="width: 10px;height: 16px;margin-left: 17px;"  />
                    <div class="people-title" style="font-size: 16px;">{{title}}</div>
                </div>
            </div>
            
            <!-- 组织内联系人 -->
            <div style="width: 100%;height: 700px;overflow:auto" v-infinite-scroll="scrollLoad" v-if="type == 0">
                <div class="flexal" style="margin-top: 14px;margin-left: 16px;" v-for="(item,index) in list" :key="index">
                    <img :src="item.avatar"  class="imgIcon-avatar"  />
                    <div class="frame-text" style="margin-left: 10px;">{{item.name}}</div>
                    <img :src="require('@/assets/img/message/start.png')" v-if="item.checked" style="width: 17px;height: 16px;margin-left: 7px;margin-top: -5px;"  />
                    <div class="tips-frame flexcen" v-if="item.super">超级管理员</div>
                </div>
            </div>

            <!-- 群组列表 -->
            <div class="flexal" style="margin-top: 20px;" v-if="type == 1">
                <div class="flexcumal" :style="{'margin-left':index == 0 ? '17px':'110px'}" v-for="(item,index) in tab" :key="index" @click="tabIndex = index">
                    <div class="tab-text" :class="index == tabIndex? 'tab-text-active':''">{{item}}</div>
                    <div class="frame-tab-line" v-if="index == tabIndex"></div>
                    <div class="frame-tab-line" style="background: #fff;" v-else></div>
                </div>
            </div>
            <div style="width: 100%;height: 660px;overflow:auto;" v-infinite-scroll="scrollLoad" v-if="type == 1">
                <div class="flexal" style="margin-top: 22px;margin-left: 16px;" v-for="(item,index) in list" :key="index">
                    <img :src="item.avatar"  class="imgIcon-avatar" style="width: 34px;height: 34px;" />
                    <div class="frame-text" style="margin-left: 10px;">群组名称名称名称（10）</div>
                    <!-- <img :src="require('@/assets/img/message/start.png')" v-if="item.checked" style="width: 17px;height: 16px;margin-left: 7px;margin-top: -5px;"  /> -->
                    <!-- <div class="tips-frame flexcen" v-if="item.super">超级管理员</div> -->
                </div>
            </div>

             <!-- 新的联系人 -->
             <div style="width: 100%;height: 700px;overflow:auto" v-infinite-scroll="scrollLoad" v-if="type == 2">
                <div class="flexal" style="margin-top: 14px;margin-left: 16px;" v-for="(item,index) in list" :key="index">
                    <img :src="item.avatar"  class="imgIcon-avatar"  />
                    <div class="frame-text" style="margin-left: 10px;">{{item.name}}</div>
                    <!-- <img :src="require('@/assets/img/message/start.png')" v-if="item.checked" style="width: 17px;height: 16px;margin-left: 7px;margin-top: -5px;"  /> -->
                    <div class="tips-frame flexcen" v-if="item.super">超级管理员</div>
                    <div style="flex: 1;"></div>
                    <div class="frame-new-button flexcen" :class="item.checked? '':'frame-new-button-active'">{{item.checked?'已验证':'通过验证'}}</div>
                </div>
            </div>

            <!-- 组织架构 -->
            <div style="width: 100%;height: 700px;overflow:auto" v-infinite-scroll="scrollLoad" v-if="type == 3">
                <div class="flexal" style="margin-top: 14px;margin-left: 16px;" v-for="(item,index) in organList" :key="index">
                    <img :src="require('@/assets/img/book/c665e08c212174c6a538225cf2c4637.png')"  class="imgIcon-avatar"  />
                    <div class="frame-text" style="margin-left: 10px;">{{item}}</div>
                </div>
            </div>

             <!-- 组织架构 -->
             <div style="width: 100%;height: 700px;overflow:auto" v-infinite-scroll="scrollLoad" v-if="type == 4">
                <div class="flexal" style="margin-top: 14px;margin-left: 16px;" v-for="(item,index) in list" :key="index">
                    <img :src="item.avatar"  class="imgIcon-avatar"  />
                    <div class="frame-text" style="margin-left: 10px;">{{item.name}}</div>
                </div>
            </div>
        </div>

        <!-- 弹窗组件集 --> 
     <memberPop :dialogVisibleShow="dialogVisibleMember" @updateDialog="updateDialogClick" :list="list" :type="1" :title="'创建群组'"></memberPop>

   

    </div>
  </template>
  
  <script>
  import memberPop from '@/components/pop-up/memberPop.vue'

  export default {
    name: 'bookList',
    props: {
        // 数据类型0:组织内联系人 1:我的群组  2:新的联系人 3:组织架构  4:部门页面
      type: {
        type:Number,
        default:4
      },
      title:{
        type:String,
        default:'组织内联系人'
      }
    },
    data(){
        return{
            input:'',
            avatar:'https://cdn.uviewui.com/uview/album/7.jpg',
            tab:['我创建的群组','我加入的群组'],
            tabIndex:0,
            organList:[
                '组织架构',
                '技术部门',
                '财务部门'
            ],
            // 组织成员
            list:[
                {
                    name:'王小二',
                    avatar:'https://cdn.uviewui.com/uview/album/1.jpg',
                    checked:false,
                    super:1
                },
                {
                    name:'王小明',
                    avatar:'https://cdn.uviewui.com/uview/album/2.jpg',
                    checked:true,
                    super:0
                },
                {
                    name:'李二',
                    avatar:'https://cdn.uviewui.com/uview/album/3.jpg',
                    checked:false,
                    super:0
                },
                {
                    name:'张三',
                    avatar:'https://cdn.uviewui.com/uview/album/4.jpg',
                    checked:false,
                    super:0
                },
                {
                    name:'老四',
                    avatar:'https://cdn.uviewui.com/uview/album/5.jpg',
                    checked:false,
                    super:0
                },
                {
                    name:'王五',
                    avatar:'https://cdn.uviewui.com/uview/album/6.jpg',
                    checked:false,
                    super:0
                },
                {
                    name:'老六',
                    avatar:'https://cdn.uviewui.com/uview/album/7.jpg',
                    checked:false,
                    super:0
                },
                {
                    name:'老王',
                    avatar:'https://cdn.uviewui.com/uview/album/8.jpg',
                    checked:false,
                    super:0
                },
                {
                    name:'老李',
                    avatar:'https://cdn.uviewui.com/uview/album/9.jpg',
                    checked:false,
                    super:0
                },
            ],
        }
    },
    components:{
        memberPop,
    },
    methods:{
        submit(index){
            this.tabIndex = index
            this.$emit('bookListSubmit',index)
        },
        scrollLoad(){
        console.log('滑底触发')
      },
      // 弹窗关闭回调
        updateDialogClick(){
            // console.log('我被调用了')
            this.dialogVisibleMember = false
        },
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="less">
    .frame{
        margin-top: 31px;
        width: 874px;
        height: 759px;
        background: #FFFFFF;
        border-radius: 0px 16px 16px 0px;
        // border-right: 1px solid #707070;

        .people-title{
            margin-left: 16px;
            font-size: 18px;
            font-weight: 500;
            color: #333333;
        }
        
        .frame-text{
            font-weight: 500;
            font-size: 13px;
            color: #333333;
        }

        .tips-frame{
            margin-left: 10px;
            width: 74px;
            height: 19px;
            background: #EEF3FF;
            border-radius: 4px 4px 4px 4px;
            font-weight: 400;
            font-size: 11px;
            color: #2953E7;
        }

        .frame-new-button{
            width: 79px;
            height: 26px;
            border-radius: 24px 24px 24px 24px;
            border: 1px solid #A2A6B1;
            font-size: 15px;
            color: #858A99;
            margin-right: 25px;
        }
        .frame-new-button-active{
            border: 1px solid #0052D9;
            color: #0052D9;
        }
    }
    .imgIcon{
      width: 30px;
      height: 31px;
    }
    .imgIcon-avatar{
        width: 43px;
        height: 43px;
        border-radius: 50%;
    }
    .frame-line{
        margin-left: 24px;
        margin-top: 28px;
        width: 328px;
        height: 0px;
        border: 1px solid #707070;
        opacity: 0.43;
    }
    .create-frame{
        margin-right: 17px;
        width: 83px;
        height: 27px;
        border-radius: 10px 10px 10px 10px;
        border: 1px solid #0052D9;
        font-size: 15px;
        color: #0052D9;
    }
    .frame-tab-line{
        width: 45px;
        height: 3px;
        background: #0052D9;
        border-radius: 2px 2px 2px 2px;
    }

    .tab-text{
        font-weight: 400;
        font-size: 16px;
        color: #858A99;
    }
    .tab-text-active{
        color: #0052D9;
    }
  </style>
  